<!DOCTYPE html>
<html lang="en">
<head>
    <title>动态发布系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="icon" href="image/icon/favicon.ico">
</head>
<body>
<div  class="container" style="width: 100%">
    <div class="row clearfix">
        <div class="col-sm-12 column">
            <ul class="nav nav-tabs">
                <li>
                    <a href="./index.html">首页</a>
                </li>
                <li>
                    <a href="./find.html">朋友圈</a>
                </li>
                <li>
                    <a href="./message.html" id="nrmes">消息</a>
                </li>
                <li >
                    <a href="./square.html" >广场</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="container" style="min-height: 325px;background-color: #F5F5F5">
    <div class="row clearfix" style="padding: 10px">
        <div class="col-sm-12 column" style="background-color: #F5F5F5">
            <table class="table">
                <tbody id="table">
                </tbody>
            </table>
            <div>
                <ul id="page" class="pagination">
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var page=0;
    var qian="/moments"
    var totalpage;
    $(function () {
        $.ajax({
            url:qian+"/loginInfo",
            headers:{
                'Authorization':localStorage.getItem('token')
            },
            success:function (data){
                if(data.code==200)
                {
                    var user=data.obj
                    if(user.nrmes!=0)
                    {
                        $("#nrmes").html("<span class=\"badge pull-right\">"+user.nrmes+"</span>消息")
                    }
                    gettotal();
                    getfans(0)
                }
                else window.location.href="./login.html"
            },
            error:function (data){
                window.location.href="./login.html"
            }
        })
    })
    function gettotal(){
        $.ajax({
            url:qian+ "/focu/gettotalfans",
            headers: {
                'Authorization': localStorage.getItem('token')
            },
            async: false,
            data:{
                vid:document.location.href.toString().replace('#',"").split("?")[1].split('=')[1]
            },
            success: function (data) {
                var total=data.obj;
                totalpage=parseInt(total/5)+(total%5===0?0:1);
                var html="                    <li onclick='fanye("+(-1)+")'>\n" +
                    "                        <a href=\"#\">Prev</a>\n" +
                    "                    </li>"
                for(var i=1;i<=totalpage;i++)
                {
                    html+="                    <li onclick='fanye("+(i-1)+")'>\n" +
                        "                       <a href=\"#\"> "+i+"</a>\n" +
                        "                    </li>"
                }
                html+="                    <li onclick='fanye("+(-2)+")'>\n" +
                    "                        <a href=\"#\">Next</a>\n" +
                    "                    </li>"
                $('#page').html(html)
            }
        })
    }
    function fanye(val){
        if(val>=0){
            page=val;
        }
        else if(val===-1)
        {
            page--;
            page=Math.max(0,page);
        }
        else {
            page++;
            page=Math.min(page=Math.min(page,totalpage-1))
        }
        getfans(page)
    }
    function getfans(page){
        var user=JSON.parse(localStorage.getItem('user'))
        $.ajax({
            url:qian+"/focu/getfans",
            headers:{
                'Authorization':localStorage.getItem('token')
            },
            async: false,
            data:{
              vid:document.location.href.toString().replace('#',"").split("?")[1].split('=')[1],
              page: page
            },
            dataType: "json",
            success:function (data){
                if(data.code==200)
                {
                    var fans=data.obj;
                    if(fans.length==0)
                    {
                        $("#page").html("")
                    }
                    var html=""
                    for(var i=0;i<fans.length;i++){
                        html+="                <tr class=\"success\">\n" +
                            "                    <td style=\"width: 60px;cursor: pointer\">\n" +
                            "                        <img onclick='info(\""+fans[i].id+"\")' src=\""+fans[i].headphoto+"\" style=\"width: 50px;height: 50px;border-radius: 30px\" alt=\"\">\n" +
                            "                    </td>\n" +
                            "                    <td>\n" +
                            "                        <label>"+fans[i].realname+"</label><br>\n" +
                            "                        <label style=\"color: lightslategrey\">"+fans[i].introduction+"</label>\n" +
                            "                    </td>\n" +
                            "                    <td id='td"+i+"' align=\"right\">\n" +
                            "                        <div style=\"width: 150px;\">\n" +
                            "                                <button id='guanzhu"+i+"' onclick='guanzhu("+fans[i].id+","+i+")' id=\"isfocus\" style=\"border-radius: 25px;width: 100px;height: 30px;background-color: #fff3ed;\" type=\"button\" class=\"btn btn-default\">"
                        html+=fans[i].isfan?(fans[i].isfocuto?"<em class=\"glyphicon glyphicon-transfer\"></em>&nbsp;相互关注": "<em class=\"glyphicon glyphicon-plus\"></em>&nbsp;加关注"):(fans[i].isfocuto?"<em class=\"glyphicon glyphicon-ok\"></em>&nbsp;已关注": "<em class=\"glyphicon glyphicon-plus\"></em>&nbsp;加关注")
                        html+="</button>\n" +
                        "<div style='height: 2px'></div>\n" +
                            "                                <button id='pinbi"+i+"' onclick='pinbi("+fans[i].id+","+i+")' id=\"isfocus\" style=\"border-radius: 25px;width: 100px;height: 30px;background-color: #cbc9c7;\" type=\"button\" class=\"btn btn-default\">"
                        html+=fans[i].isblack?"<em class=\"glyphicon glyphicon-ok\"></em>&nbsp;已屏蔽" :"<em class=\"glyphicon glyphicon-remove\"></em>&nbsp;屏蔽"
                        html+="</button>\n" +
                            "                        </div>\n" +
                            "                    </td>\n" +
                            "                </tr>"
                    }
                    $('#table').html(html)
                    for(var i=0;i<fans.length;i++){
                        if(localStorage.getItem('id')==fans[i].id)
                            $('#td'+i).html("")
                    }
                }
                else window.location.href="./login.html"
            }
        })
    }
    function guanzhu(vid,did){
        $.ajax({
            url: qian+"/focu/guanzhu",
            headers: {
                'Authorization': localStorage.getItem('token')
            },
            type: "put",
            data: {
                vid: vid
            },
            dataType: "json",
            success: function (data) {
                if(data.code==200){
                    var arr=data.obj;
                    if(arr[0]==1&&arr[1]==1)
                        $('#guanzhu'+did).html("<em class=\"glyphicon glyphicon-transfer\"></em>&nbsp;相互关注")
                    else if(arr[0]==1&&arr[1]==0)
                        $('#guanzhu'+did).html("<em class=\"glyphicon glyphicon-plus\"></em>&nbsp;加关注")
                    else if(arr[0]==0&&arr[1]==1)
                        $('#guanzhu'+did).html("<em class=\"glyphicon glyphicon-ok\"></em>&nbsp;已关注")
                    else if(arr[0]==0&&arr[1]==0)
                        $('#guanzhu'+did).html("<em class=\"glyphicon glyphicon-plus\"></em>&nbsp;加关注")
                }
            }
        })
    }
    function pinbi(vid,did){
        $.ajax({
            url:qian+ "/focu/pinbi",
            headers: {
                'Authorization': localStorage.getItem('token')
            },
            type:"put",
            data: {
                vid: vid
            },
            dataType: "json",
            success: function (data) {
                if(data.code==200){
                    if(data.obj)
                    {
                        $('#pinbi'+did).html("<em class=\"glyphicon glyphicon-ok\"></em>&nbsp;已屏蔽" )
                    }
                    else {
                        $('#pinbi'+did).html("<em class=\"glyphicon glyphicon-remove\"></em>&nbsp;屏蔽")
                    }
                }
            }
        })
    }
    function info(val){
        if(localStorage.getItem('id')==val)window.location.href="./index.html"
        else window.location.href="./visitor.html?vid="+val
    }
</script>
</html>